<template>
  <!--楼书详情-->
  <div class="boxindex">
    <!--楼书-->
    <div class="details-build">
      <div class="details-build-title" style="padding-top:30px;font-size:18px">房源</div>
      <div class="housing-properties-form">
        <!-- <el-form ref="form" :model="houseForm" label-width="100px">
          <div class="housing-properties-flex">
            <el-form-item label="房源名称">
              <el-input disabled="disabled" v-model="houseForm.houseName"></el-input>
            </el-form-item>
          </div>
          <div class="housing-properties-flex">
            <el-form-item label="几天前上架">
              <el-input disabled="disabled" v-model="houseForm.publishTime"></el-input>
            </el-form-item>
            <el-form-item label="上下架状态">
              <el-input disabled="disabled" v-model="houseForm.publishStatus"></el-input>
            </el-form-item>
          </div>
          <div class="housing-properties-flex">
            <el-form-item label="商圈">
              <el-input disabled="disabled" v-model="houseForm.tradingArea">533</el-input>
            </el-form-item>
          </div>
          <div class="housing-properties-flex">
            <el-form-item label="价格">
              <el-input disabled="disabled" v-model="houseForm.price"></el-input>
            </el-form-item>
            <el-form-item label="面积">
              <el-input disabled="disabled" v-model="houseForm.area"></el-input>
            </el-form-item>
            <el-form-item label="楼层">
              <el-input disabled="disabled" v-model="houseForm.floor"></el-input>
            </el-form-item>
          </div>
          <div class="housing-properties-flex">
            <el-form-item label="房源类型">
              <el-input disabled="disabled" v-model="houseForm.type" ></el-input>
            </el-form-item>
            <el-form-item label="浏览量数">
              <el-input disabled="disabled" v-model="houseForm.monthBrowse"></el-input>
            </el-form-item>
          </div>
          <div class="details-imgs">
            <el-form-item label="图片"></el-form-item>
            <div class="housing-properties-img" v-for="item in houseForm.imgList" :key="item">
              <img :src="`${locationUrl}${item}`">
            </div>
          </div>
        </el-form>-->
        <div class="index-center">
          <div class="index-list" v-for="item in houseForm" :key="item.houseId">
            <div class="index-list-img">
              <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
            </div>
            <div class="index-list-center">
              <div
                class="index-list-title"
              >{{item.houseTitle}} | {{item.floorNo}}层 | {{item.area}}m²</div>
              <div class="index-list-item">
                <div class="index-list-money">
                  <span>{{item.price}}</span> 元/m²·天
                </div>
                <div class="index-list-browse">浏览量 {{item.visitsNum}}</div>
              </div>
              <div class="index-list-item">
                <div class="index-list-upper">上架：{{item.publishTime}}</div>
                <!-- <div class="index-list-time">加入楼数量15</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--联合办公-->
    <div class="details-office">
      <div class="details-build-title" style="padding-top:30px;font-size:18px">联合办公</div>
      <div class="housing-properties-form">
        <!-- <el-form ref="form" :model="officeFrom" label-width="100px">
          <div class="housing-properties-flex">
            <el-form-item label="品牌名称">
              <el-input disabled="disabled" v-model="officeFrom.brandName"></el-input>
            </el-form-item>
            <el-form-item label="社区名称">
              <el-input disabled="disabled" v-model="officeFrom.communityName"></el-input>
            </el-form-item>
          </div>
          <div class="housing-properties-flex">
            <el-form-item label="开放式工位" >
              <el-input disabled="disabled" v-model="officeFrom.spacePrice" style="width: 550px;" ></el-input>
            </el-form-item>
          </div>
          <div class="housing-properties-flex">
            <el-form-item label="独立办公室">
              <el-input disabled="disabled" v-model="officeFrom.officePrice" style="width: 550px;"></el-input>
            </el-form-item>
          </div>
          <div class="housing-properties-flex">
            <el-form-item label="路演场地">
              <el-input disabled="disabled" v-model="officeFrom.roadPrice" style="width: 550px;"></el-input>
            </el-form-item>
          </div>
        </el-form>-->
        <div class="follow-union-center">
          <div class="follow-union-list">
            <div class="follow-union-list-left">
              <img src="../assets/images/fangbj.png">
            </div>
            <div class="follow-union-list-right">
              <div class="follow-union-list-title">华贸中心社区</div>
              <div class="follow-union-list-num">
                开放式工位：
                <span>4500</span> 元dddddd/月
              </div>
              <div class="follow-union-list-num">
                独立办公室：
                <span>6500</span> 元位·月
              </div>
              <div class="follow-union-list-bt">
                <div class="follow-union-list-l">取消关注</div>
                <div class="follow-union-list-l">进入楼盘</div>
                <div class="follow-union-list-img">
                  <img src="../assets/images/icon_add.png">
                </div>
                <div class="follow-union-list-img">
                  <img src="../assets/images/icon_delete.png">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="housing-properties-bt" style="margin-top:30px">
        <el-button style="padding: 14px 50px; margin: 0 40px;" @click="blackgolast()">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BuildDetail",
  data() {
    return {
      houseForm: [],
      officeFrom: {}
    };
  },
  computed: {
  },
  methods: {
    blackgolast() {
      this.$router.go(-1);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.boxindex {
  padding: 50px;
  height: auto;
  overflow: auto;
}
.boxindex > div {
  background: #ffffff;
}
.details-office {
  margin-top: 30px;
}
.details-build-title {
  font-size: 16px;
  color: #778ca2;
  padding-left: 30px;
}

.housing-properties-bt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding-bottom: 30px;
}

.housing-properties-img img {
  height: 148px;
  width: 148px;
  border: 1px solid #e8ecef;
  margin-right: 30px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 30px;
}
.housing-properties-form {
  padding: 30px 0;
}

.housing-properties-add-title {
  font-size: 14px;
  color: #778ca2;
}
.housing-properties-flex {
  display: flex;
}
.index-list {
  width: 252px;
  border-radius: 10px;
  background: #ffffff;
  margin-right: 30px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
.index-center {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 20px 10px 0 40px;
}
.index-list-img > img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 170px;
}
.index-list-center {
  padding: 15px 15px;
}
.index-list-title {
  color: #333333;
  font-size: 12px;
}
.index-list-money {
  color: #666666;
  font-size: 12px;
  margin-right: 8px;
}
.index-list-money > span {
  color: #39b4ff;
  font-size: 16px;
}
.index-list-browse {
  color: #778ca2;
  font-size: 11px;
}
.index-list-upper {
  color: #666666;
  font-size: 12px;
}

.follow-union-center {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px 30px 40px;
  background: #ffffff;
}
.follow-union-title {
  color: #778ca2;
  font-size: 12px;
  padding: 0 40px;
}
.follow-union-list {
  background: #ffffff;
  margin-right: 15px;
  margin-top: 25px;
  display: flex;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
.follow-union-list-left {
  width: 195px;
  height: 170px;
  padding-right: 20px;
  float: left;
}
.follow-union-list-left > img {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100%;
}
.follow-union-list-right {
  width: 195px;
  height: 170px;
  padding-right: 20px;
}
.follow-union-list-title {
  width: 100%;
  padding-top: 30px;
  color: #333333;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-union-list-num {
  padding-top: 12px;
  color: #666666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-union-list-num > span {
  color: #39b4ff;
  font-size: 16px;
}
.follow-union-list-bt {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
}
.follow-union-list-l {
  font-size: 12px;
  color: #009fe8;
  margin-right: 20px;
}
.follow-union-list-img {
  width: 20px;
  height: 20px;
}
</style>
